<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover">
    <title>typelist</title>
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2968499_plrbdnt5ah.css?spm=a313x.7781069.1998910419.39&file=font_2968499_plrbdnt5ah.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul>li,
        li {
            list-style: none;
        }

        /* 搜索 */
        .search {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            width: 91.2vw;
            height: 8.5333vw;
            background: #f7f7f7;
            border-radius: 4vw;
            padding-left: 3vw;
            margin: 1.3333vw 0 0 4.5333vw;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 20;
        }

        .search>input {
            width: 81.2vw;
            height: 100%;
            outline: 0;
            border: 0;
            border-radius: 4vw;
            padding-left: 3vw;
            background-color: #f7f7f7;
        }

        ::placeholder {
            font-size: 3.8667vw;
            color: #a6a6a6;
        }

        .search i {
            font-size: 6.4vw;
            color: #d4d1d1;
        }

        /* 商品 */
        .list-navbar {
            /* background-color: coral; */
            position: fixed;
            top: 13vw;
            bottom: 13.8667vw;
            left: 0;
            width: 21.12vw;
            overflow: hidden;
            z-index: 20;
            max-width: 40.5333vw;
            overflow: scroll;

        }

        ::-webkit-scrollbar {
            display: none;
        }

        /* 
        火狐滚动条
        ::-moz-scrollbar {
            opacity: 0;
        } */

        .list-navbar ul {
            background: #fefefe;
            overflow-y: auto;
        }

        .list-navbar ul li {
            width: 21.12vw;
            line-height: 12.5333vw;
            height: 12.5333vw;
            text-align: center;
            position: relative;
        }

        .list-navbar ul li a span {
            font-size: 3.3333vw;
            color: #666;
        }

        .list-navbar li:hover::before {
            opacity: 1;
        }

        .list-navbar li::before {
            display: block;
            content: '';
            width: 0.6vw;
            height: 4vw;
            background-color: orangered;
            position: absolute;
            top: 50%;
            margin-top: -2vw;
            opacity: 0;
        }

        .active::before {
            opacity: 1 !important;
        }

        .content {
            width: 70.1333vw;
            height: 616px;
            background-color: #fff;
            margin-right: 4vw;
            margin-top: 13vw;
            max-width: 134.4vw;
        }

        main {
            display: flex;
            justify-content: end;
            /* margin-left:24.12vw !important; */
            /* max-width: 504px;
            margin: 0 auto; */
        }
        /* 内容区 */
        .content {
            overflow: scroll !important;
        }

        .content1 {
            width: 70.04vw;
            height: 20.3813vw;
        }

        .content1 img {
            width: 70vw;
            height: 20.3813vw;
        }

        .content2 {
            width: 70.1733vw;
            background-color: #fff;
            padding: 2vw 0;
            border-bottom: 1px solid rgb(245, 242, 242);
            position: sticky;
            top: -0.5333vw;
            left: 0;
        }

        .content2 ul {
            display: flex;
            justify-content: space-between;
            white-space: nowrap;
            overflow: hidden;
        }

        .content2 ul li {
            font-size: 3.2vw;
            padding: .8vw 1.8vw;
            opacity: .6;
            border-radius: 0.5333vw;
        }

        .content2 ul li:nth-child(1) {
            background-color: rgb(219, 218, 216);
        }

        .content2 ul li:hover {
            background-color: rgb(219, 218, 216);
        }

        .content2 ul li:nth-child(2) {
            margin: 0 5vw;
        }

        .content3 .title {
            margin-top: 3vw;
            padding: 2vw;
            background-color: #fff;
            font-weight: 700;
        }

        .content3 .title span {
            font-size: 3.8667vw;
            color: #333;
        }

        .content3 .detaile img {
            width: 18vw;
            height: 18vw;
        }

        .content3 .detaile .title1 {
            font-size: 3.8667vw;
        }

        .content3 .detaile .price {
            font-size: 4.1333vw;
        }

        .detaile {
            display: flex;
            align-items: center;
            background: #f8f8f8;
            margin-bottom: 1.3333vw;
        }

        .new {
            font-size: 2.6667vw;
            padding: .1vw .6vw;
            border-radius: 0.2667vw;
            background: #fff;
            color: #c69768;
            border: 1px solid #c69768;
        }
    </style>
</head>

<body>
    <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜索商品名称">
    </div>
    <main>
        <div class="list-navbar">
            <ul>
                <li>
                    <a href="#">
                        <span>推荐</span>
                    </a>
                </li>
                <li class="active">
                    <a href="#">
                        <span>Xiaomi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Redmi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>游戏手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>推荐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Xiaomi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Redmi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>游戏手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>推荐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Xiaomi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Redmi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>游戏手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>推荐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Xiaomi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Redmi手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>游戏手机</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>推荐</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>Xiaomi手机</span>
                    </a>
                </li>

            </ul>
        </div>
        <div class="content">
            <div class="contentbox">
                <div class="content1">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45d69b7452db7489a7a7ede9a4ca9c78.png?w=734&h=220&bg=7F0000"
                        alt="图片">
                </div>
                <div class="content2">
                    <ul>
                        <li>Xiaomi Civi</li>
                        <li>Xiaomi 数字系列</li>
                        <li>Xiaomi MIX系列</li>
                        <li>手机配件</li>
                    </ul>
                </div>
                <ul class="content3">
                    <li class="title">
                        <span>Xiaomi Civi</span>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;<span class="new">上新</span></p>
                        </div>
                    </li>
                    <li class="title">
                        <span>Xiaomi 数字系列</span>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;<span class="new">上新</span></p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599 &nbsp;<span class="new">上新</span></p>
                        </div>
                    </li>
                    <li class="title">
                        <span>手机配件</span>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599</p>
                        </div>
                    </li>
                    <li class="detaile">
                        <div>
                            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2fb0f98dd723b9a3b66167aa7e86a8ea.png?w=800&h=800"
                                alt="">
                        </div>
                        <div>
                            <p class="title1">Xiaomi Civi</p>
                            <p class="price">￥ 2599</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <footer>
        <div class="foot-nav">
            <a href="./index.html">
                <div class="index"><img src="./img/底部导航/1.png" alt=""></div>
                <p class="index-text">首页</p>
            </a>
            <a href="./typelist.html">
                <div>
                    <img src="./img/底部导航/2.png" alt="">
                </div>
                <p>分类</p>
            </a>
            <a href="./miquan.html">
                <div>
                    <img src="./img/底部导航/3.png" alt="">
                </div>
                <p>米圈</p>
            </a>
            <a>
                <div>
                    <img src="./img/底部导航/4.png" alt="">
                </div>
                <p>购物车</p>
            </a>
            <a>
                <div>
                    <img src="./img/底部导航/5.png" alt="">
                </div>
                <p>我的</p>
            </a>
        </div>
    </footer>
</body>
<script>

</script>

</html>